<template>
  <div class="map">
    <div  v-loading="listLoading" element-loading-text="拼命加载中" id="newsHeatMap" :style="{ width: '100%', height: '600px' }"></div>
  </div>
</template>

<script>
import "../../../static/data/js/china.js"; // 引入中国地图数据
export default {
  data() {
    return {
      listLoading: true,
    };
  },

  mounted() {
    this.ChinaMap();
    window.addEventListener("resize", () => {
      this.ChinaMap();
    });
  },

  methods: {
    ChinaMap() {
      var that = this;
      var myChart;
      let newsHeatMap = document.getElementById("newsHeatMap"); //这里是为了获得容器所在位置
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();
      }
      myChart = that.$echarts.init(newsHeatMap);
      var colors = [
        [
          "#1DE9B6",
          "#F46E36",
          "#04B9FF",
          "#5DBD32",
          "#FFC809",
          "#FB95D5",
          "#BDA29A",
          "#6E7074",
          "#546570",
          "#C4CCD3"
        ],
        [
          "#37A2DA",
          "#67E0E3",
          "#32C5E9",
          "#9FE6B8",
          "#FFDB5C",
          "#FF9F7F",
          "#FB7293",
          "#E062AE",
          "#E690D1",
          "#E7BCF3",
          "#9D96F5",
          "#8378EA",
          "#8378EA"
        ],
        [
          "#DD6B66",
          "#759AA0",
          "#E69D87",
          "#8DC1A9",
          "#EA7E53",
          "#EEDD78",
          "#73A373",
          "#73B9BC",
          "#7289AB",
          "#91CA8C",
          "#F49F42"
        ]
      ];
      var maxNum = [150, 150, 100, 50];
      let cityValue = [[], [], [], []];
      var colorIndex = 0;
      var month = [
        "2020/7-10",
        "2020/11-2021/01",
        "2021/02-2021/04",
        "2021/04-2021/06"
      ];
      var mapData = [[], [], [], []];
      var cityNum = [[], [], [], []];
      var geoCoordMap = require("../../../static/data/json/province.json");
      /*柱子Y名称*/
      var categoryData = [];
      var barData = [];

      function getCityVal() {
        // console.log(cityValue[0])
        for (var key in geoCoordMap) {
          for (var i = 0; i < month.length; i++) {
            let val = getVal(cityValue[i], key);
            // console.log(val)
            mapData[i].push({
              month: month[i],
              name: key,
              value: val
            });
          }
        }
      }
      function getData(data) {
        // console.log(data)
        for (var i = 0; i < data.length; i++) {
          data[i].sort(function sortNumber(a, b) {
            return a.value - b.value;
          });
          barData.push([]);
          categoryData.push([]);
          for (var j = 0; j < data[i].length; j++) {
            barData[i].push(data[i][j].value);
            categoryData[i].push(data[i][j].name);
          }
        }
      }

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i][0]];
          if (geoCoord) {
            res.push(geoCoord.concat(data[i][2]));
          }
        }
        return res;
      };

      //获取屏幕宽度并计算比例
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res * fontSize;
      }
      //分割请求返回数组
      function group(array, subGroupLength) {
        let index = 0;
        let newArray = [];
        while (index < array.length) {
          newArray.push(array.slice(index, (index += subGroupLength)));
        }
        return newArray;
      }
      function drawOut(array, index) {
        let newArray = [];
        while (index < array.length) {
          newArray.push(array[index]);
          index += 4;
        }
        return newArray;
      }
      function convertData2(array) {
        var res = [];
        for (var i = 0; i < array.length; i++) {
          setVal(res, array[i][0], array[i][2]);
        }
        var cityNull = ["澳门", "香港", "台湾", "西藏", "新疆", "重庆"];
        for (var i = 0; i < cityNull.length; i++) {
          setVal(res, cityNull[i], "0");
        }
        return res;
      }

      function setVal(array, key, value) {
        array[key] = value;
      }
      function getVal(array, key) {
        return array[key];
      }
      // this.$axios.get("../../../static/data/json/heatnews.json")
      this.$axios
        .get("http://1.117.99.174:8080/newsmap/news/getCityNum")
        .then(res => {
          var Arrays = res.data.data;
          var groupedArray = group(Arrays, 3);
          for (var i = 0; i < 4; i++) {
            cityNum[i] = drawOut(groupedArray, i);
          }

          for (var i = 0; i < cityNum.length; i++) {
            cityValue[i] = convertData2(cityNum[i]);
          }
          getCityVal();
          // console.log(mapData[0])
          getData(mapData);
          // getData(arr)
          // console.log(mapData)
          // console.log(cityValue);
          var optionXyMap01 = {
            //时间轴组件
            timeline: {
              data: month,
              axisType: "category",
              autoPlay: true,
              playInterval: 6000,
              left: "10%",
              right: "10%",
              bottom: "3%",
              width: "80%",
              label: {
                normal: {
                  textStyle: {
                    color: "#ddd"
                  }
                },
                emphasis: {
                  textStyle: {
                    color: "#fff"
                  }
                }
              },
              symbolSize: 10,
              lineStyle: {
                color: "#555"
              },
              checkpointStyle: {
                borderColor: "#777",
                borderWidth: 2
              },
              controlStyle: {
                showNextBtn: true,
                showPrevBtn: true,
                normal: {
                  color: "#666",
                  borderColor: "#666"
                },
                emphasis: {
                  color: "#aaa",
                  borderColor: "#aaa"
                }
              }
            },

            //条形图
            baseOption: {
              animation: true,
              animationDuration: 1000,
              animationEasing: "cubicInOut",
              animationDurationUpdate: 1000,
              animationEasingUpdate: "cubicInOut",
              grid: {
                right: "1%",
                top: "15%",
                bottom: "10%",
                width: "20%"
              },
              tooltip: {
                trigger: "axis", // hover触发器
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                  shadowStyle: {
                    color: "rgba(150,150,150,0.1)" //hover颜色
                  }
                }
              },
              geo: {
                show: true,
                map: "china",
                roam: true,
                zoom: 1.1,
                center: [113.83531246, 34.0267395887],
                label: {
                  emphasis: {
                    show: false
                  }
                },
                scaleLimit: {
                  min: 0.6,
                  max: 2
                },
                itemStyle: {
                  normal: {
                    borderColor: "rgba(147, 235, 248, 1)",
                    borderWidth: 1,
                    areaColor: {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.8,
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(147, 235, 248, 0)" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "rgba(147, 235, 248, .2)" // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    },
                    // shadowColor: "rgba(128, 217, 248, 1)",
                    shadowColor: "rgba(255, 255, 255, 1)",
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10
                  },
                  emphasis: {
                    areaColor: "#389BB7",
                    borderWidth: 0
                  }
                }
              }
            },
            options: []
          };

          for (var n = 0; n < month.length; n++) {
            optionXyMap01.options.push({
              backgroundColor: "#013954",
              title: [
                {
                  text: "新闻热度指数",
                  left: "30%",
                  top: "7%",
                  textStyle: {
                    color: "#fff",
                    fontSize: fontSize(0.28)
                  }
                },
                {
                  id: "statistic",
                  text: month[n] + "数据统计情况",
                  left: "78%",
                  top: "6%",
                  textStyle: {
                    color: "#fff",
                    fontSize: fontSize(0.25)
                  }
                }
              ],
              xAxis: {
                type: "value",
                scale: true,
                position: "top",
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: "#aaa",
                    fontSize: fontSize(0.2)
                  }
                }
              },
              yAxis: {
                type: "category",
                //  name: 'TOP 20',
                nameGap: 16,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#ddd"
                  }
                },
                axisTick: {
                  show: false,
                  lineStyle: {
                    color: "#ddd"
                  }
                },
                axisLabel: {
                  interval: 0,
                  textStyle: {
                    color: "#ddd",
                    fontSize: fontSize(0.18)
                  }
                },
                data: categoryData[n]
              },

              series: [
                //地图
                {
                  name: "热力图",
                  type: "heatmap",
                  map: "china",
                  geoIndex: 0,
                  aspectScale: 0.75, //长宽比
                  showLegendSymbol: false, // 存在legend时显示
                  coordinateSystem: "geo",
                  data: convertData(cityNum[n])
                },

                // //地图中闪烁的点
                // {
                //   //  name: 'Top 5',
                //   type: "effectScatter",
                //   coordinateSystem: "geo",
                //   data: convertData2(
                //     mapData[n]
                //       .sort(function (a, b) {
                //         return b.value - a.value;
                //       })
                //       .slice(0, 20)
                //   ),
                //   symbolSize: function (val) {
                //     return val[2] / 10;
                //   },
                //   showEffectOn: "render",
                //   rippleEffect: {
                //     brushType: "stroke",
                //   },
                //   hoverAnimation: true,
                //   label: {
                //     normal: {
                //       formatter: "{b}",
                //       position: "right",
                //       show: true,
                //     },
                //   },
                //   itemStyle: {
                //     normal: {
                //       color: colors[colorIndex][n],
                //       shadowBlur: 10,
                //       shadowColor: colors[colorIndex][n],
                //     },
                //   },
                //   zlevel: 1,
                // },

                //柱状图
                {
                  zlevel: 1.5,
                  type: "bar",
                  symbol: "none",
                  itemStyle: {
                    normal: {
                      color: colors[colorIndex][n]
                    }
                  },
                  data: barData[n]
                }
              ],
              visualMap: [
                {
                  show: true,
                  left: "2%",
                  bottom: "2%",
                  max: maxNum[n],
                  min: 0,
                  z: 999,
                  calculable: false,
                  text: ["高", "低"],
                  inRange: {
                    color: ["#0033FF", "#FFFF00", "#FF3333"]
                  },
                  textStyle: {
                    color: "#2ecc71",
                    fontSize: fontSize(0.2)
                  },
                  seriesIndex: 0
                }
              ]
            });
          }
          window.onresize = function() {
            myChart.resize();
          };
          myChart.setOption(optionXyMap01);
          that.listLoading = false;
        });
    }
  }
};
</script>
<style scoped>
#newsHeatMap {
  margin-top: 30px;
}
</style>
